<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Home</title>
        <link rel="stylesheet" type="text/css" href="default.css">
        <script type="text/javascript" src="http://www.big5apps.com/api/bigfive.js">
        </script>
        <script type="text/javascript">
            
            // INITIALIZATION
            
            function big5available(){
                // This will only be called if the page is viewed by Big Five
                
                // Set some informations we got from Big Five
                $('dev-model').innerHTML = Device.model
                $('dev-id').innerHTML = Device.id
                
                // Device.setBool("fullscreen", true)                
                // Device.setBool("statusbar", false)
                toogleNavigation()
                
            }
            
            // Helper to hide the navigation bar
            var navigationVisible = true
            function toogleNavigation(){
                navigationVisible = !navigationVisible
                Device.setBool("navigationbar", navigationVisible)
            }
            
            // Helper to hide the navigation bar
            var statusVisible = true
            function toogleStatus(){
                statusVisible = !statusVisible
                Device.setBool("statusbar", statusVisible)
            }
            
            window.onload = function(){
                // Init Big Five and skip to custom "big5available" funcion
                Device.start(big5available);
            }
        </script>
    </head>
    <body>
        <h1>Big Five Demo</h1>        
        <p>
            Choose a demo:
        </p>
        <p>
            <button onclick="window.location.href='accel.html'">
                Acceleration
            </button>
            <br/>
            <button onclick="window.location.href='location.html'">
                Geo Location
            </button>
            <br/>
            <button onclick="window.location.href='image.html'">
                Camera and Images
            </button>
            <br/>
            <button onclick="window.location.href='database.html'">
                Database
            </button>
            <br/>
            <button onclick="Device.vibrate()">
                Vibrate
            </button>
            (only on iPhone)
            <br/>
            <button onclick="toogleNavigation()">
                Toggle Navigation
            </button>
            <!-- button onclick="toogleStatus()">
            Toggle Statusbar
            </button -->            
            <button onclick="Device.exit()">
                Exit Web App
            </button>
        </p>
		<p>
            You are running on <strong id="dev-model">???</strong>
            and this is its unique identification number <strong id="dev-id">???</strong>
        </p>
        <p>
            <br/>
            Go to <a href="http://www.big5apps.com" onclick="if(confirm('This will leave Big Five application! Continue?')) Device.safari(this.href); else return false;">Big Five Homepage</a>
        </p>
    </body>
</html>
